<template>
  <a-form
    ref="form2Ref"
    :model="formValue"
    @submit="handleSubmit"
    label-placement="left"
    style="margin: 40px 0; width: 100%; padding-right: 10%"
  >
    <a-form-item label="付款账户" field="myAccount">
      <span>NaiveUiAdmin@163.com</span>
    </a-form-item>
    <a-form-item label="收款账户" field="account">
      <span>NaiveUiAdmin@qq.com</span>
    </a-form-item>
    <a-form-item label="收款人姓名" field="name">
      <span>Ah jung</span>
    </a-form-item>
    <a-form-item label="转账金额" field="money">
      <span>￥1280</span>
    </a-form-item>
    <a-divider />
    <a-form-item label="支付密码" field="password" :rules="rules.password">
      <a-input v-model="formValue.password" type="password" placeholder="请输入支付密码" />
    </a-form-item>
    <a-form-item :wrapperCol="{ offset: 5 }">
      <a-space>
        <a-button :loading="loading" type="primary" html-type="submit">提交</a-button>
        <a-button @click="prevStep">上一步</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const form2Ref: any = ref(null);

  const loading = ref(false);

  const formValue = ref({
    password: '086611',
  });

  const rules = {
    password: [
      {
        required: true,
        message: '请输入支付密码',
        trigger: 'blur',
      },
    ],
  };

  const emit = defineEmits(['prevStep', 'nextStep']);

  function prevStep() {
    emit('prevStep');
  }

  function handleSubmit({ errors }) {
    if (errors) {
      console.log('error', errors);
      return Message.error('验证失败，请填写完整信息');
    }
    setTimeout(() => {
      emit('nextStep');
    }, 1000);
  }
</script>
